<template>
  <div class="wellreceiving">
      <hr>
      <div class="filmInfo" v-for='item in filmImformation' :key="item.index">
        <table>
          <tr>
            <td rowspan="4">
              <img :src="item.src">
            </td>
            <td>
                <p>{{item.filmName}}</p>
                <p>观众评<span>{{item.filmScore}}</span></p>
                <p>{{item.filmMain}}</p>
                <p>{{item.filmPlace}}</p>
            </td>
            <td rowspan="4">
              <input type="button" value="购票">
            </td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
export default {
    name:'well-receiving',
    data(){
      return{
        filmImformation:[]
      }
    },
    created(){
      this.getWellReceiving();
    },
    methods:{
      getWellReceiving(){
        this.$ajax.get('/mock/Well-Receiving.json')
        .then(response => {
          console.log(response);
          if(response.status == 200){
            if(response.data && response.data.filmImformation){
              this.filmImformation = response.data.filmImformation
            }
          }
        })
        .catch(function(error){
          console.log(error);
        })
      }
    }
}
</script>

<style scoped>
.wellreceiving{
  width:100%;
}
.filmInfo table tr td img{
  width:100px;
}
.filmInfo {
  width:98%;
  margin:0 auto;
  border-bottom:1px solid rgba(146, 145, 145,0.3);
}
.filmInfo table tr td p{
  height:30px;
  line-height:30px;
  width:250px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  margin:0 0 5px 10px;
  font-size:18px;
}
.filmInfo table tr td:nth-of-type(2) p:nth-of-type(1){
  font-weight:bold;
  font-size:20px;
}
.filmInfo table tr td p:not(p:nth-of-type(1)){
  color:gray;
}
table{
  margin:10px;
}
.filmInfo table tr td input{
  width:50px;
  height:30px;
  background:#e54847;
  border:0;
  border-radius:5px;
  color:#fff;
  margin-left:10px;
}
.filmInfo table tr td:nth-of-type(2){
  margin-left:10px;
}
/* 设置评分样式 */
.filmInfo table tr td p:nth-of-type(2) span{
  font-size:23px;
  color:#f90;
  display:inline-block;
  margin-left:5px;
}
</style>